import React, { useState, useRef, useEffect } from 'react';
import Header from './header';
import Menu from './menu';
import '../css/reset.css';
import '../css/common.css';
import { useInnerHeight } from "../../common/hook/index";
import BScroll from "better-scroll";

export default function Frame(props) {
  let [showMenu, setShowMenu] = useState(false);
  let innerHeight = useInnerHeight();
  let wrapper = useRef(null);
  function changeShow() {
    setShowMenu(!showMenu);
  }
  function menuHide() {
    setShowMenu(false);
  }

  //dome 加载完 运行一次
  useEffect(() => {
    console.log('useEffect', wrapper);
    new BScroll(wrapper.current)
  }, [])
  return (
    < div >
      <Header changeShow={changeShow} />
      <Menu menuHide={menuHide} />
      <div id="main" onTouchStart={() => { menuHide() }} style={{ transform: `translateX(${showMenu ? 4.5 : 0}rem)`, height: innerHeight }}>
        <div ref={wrapper} className="pageWrap">
          <div>{props.children}</div>
        </div>
      </div>
    </div >
  )
}